import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Record.css'
import { Button } from 'antd-mobile'

export default function Record() {
    const navigate = useNavigate()
    const [record, setRecord] = useState([
        {
            doctor: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            msg: '王晓晓 女 5岁',
            time: '2023-10-10 10:00',
            price: '39.00',
            status: '待支付'
        },
        {
            doctor: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            msg: '王晓晓 女 5岁',
            time: '2023-10-10 10:00',
            price: '39.00',
            status: '已完成'
        },
        {
            doctor: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            msg: '王晓晓 女 5岁',
            time: '2023-10-10 10:00',
            price: '39.00',
            status: '已取消'
        },
    ])
    return (
        <div className='record'>
            <div className='record-header'>
                <h1>挂号记录</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="record-content">
                {
                    record.map((item, index) => {
                        return <div key={index} className='record-item'>
                            <h3>{item.doctor} {item.position}</h3>
                            <p>{item.hospital} {item.department}</p>
                            <div className='record-item-msg'>
                                <p>患者信息：<span style={{ fontWeight: 'bold' }}>{item.msg}</span></p>
                                <p>就诊时间：<span style={{ fontWeight: 'bold' }}>{item.time}</span></p>
                                <p>订单金额：<span style={{ fontWeight: 'bold' }}>￥{item.price}</span></p>
                            </div>
                            <p className='status'
                                style={{
                                    color: item.status === '待支付' ? 'red' : 'gary'
                                }}
                            >{item.status}</p>
                            <div className='record-item-btn'>
                                {
                                    item.status === '待支付' 
                                    ? <Button color='primary' size='small' fill='outline' shape='rounded'>去支付</Button> 
                                    : <Button color='default' size='small' fill='outline' shape='rounded'>删除订单</Button>
                                }
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}
